<template>
  <el-form :model="registerForm" :rules="rules" ref="registerFormRef" label-width="0">
    <el-form-item prop="name">
      <el-input v-model="registerForm.name" placeholder="请输入姓名">
        <template #prefix>
          <el-icon><User /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input v-model="registerForm.username" placeholder="请输入账号">
        <template #prefix>
          <el-icon><UserFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="registerForm.password" type="password" placeholder="请输入密码">
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码">
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input v-model="registerForm.phone" placeholder="请输入手机号">
        <template #prefix>
          <el-icon><Phone /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitRegister" style="width: 48%;">注册</el-button>
      <el-button @click="resetForm" style="width: 48%; margin-left: 4%;">重置</el-button>
    </el-form-item>
    <div class="login-link">
      已有账号？<a href="#" @click.prevent="$emit('switch-to-login')" class="login-button">立即登录</a>
    </div>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { User, UserFilled, Lock, Phone } from '@element-plus/icons-vue';

const emit = defineEmits(['register-success', 'switch-to-login']);

const registerForm = ref({
  name: "",
  username: "",
  password: "",
  confirmPassword: "",
  phone: "",
});

const registerFormRef = ref(null);

const rules = {
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { 
      pattern: /^[\u4e00-\u9fa5]{2,6}$/, 
      message: "姓名只能包含中文，长度2-6位", 
      trigger: "blur" 
    }
  ],
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { 
      pattern: /^[a-zA-Z0-9_]{4,16}$/, 
      message: "账号只能包含字母、数字和下划线，长度4-16位", 
      trigger: "blur" 
    }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { 
      pattern: /^[a-zA-Z0-9_]{6,16}$/, 
      message: "密码只能包含字母、数字和下划线，长度6-16位", 
      trigger: "blur" 
    }
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.value.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { 
      pattern: /^1[3-9]\d{9}$/, 
      message: "请输入正确的手机号格式", 
      trigger: "blur" 
    }
  ],
};

const submitRegister = () => {
  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post(
          "http://localhost:3000/api/users/useradd",
          registerForm.value
        );
        ElMessage.success("注册成功");
        emit('register-success');
      } catch (error) {
        console.error("注册失败:", error);
        ElMessage.error("注册失败，请重试");
      }
    } else {
      ElMessage.error("请检查输入信息");
    }
  });
};

const resetForm = () => {
  registerFormRef.value.resetFields();
};
</script>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-input) {
  --el-input-height: 45px;
  font-size: 14px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  padding: 0 15px;
  transition: all 0.2s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409eff inset;
}

:deep(.el-input__prefix) {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

:deep(.el-icon) {
  font-size: 18px;
  color: #909399;
}

:deep(.el-input__inner) {
  margin-left: 4px;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
}

.login-button {
  color: #409eff;
  text-decoration: none;
  margin-left: 4px;
  font-weight: bold;
  cursor: pointer;
}

.login-button:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style> 